<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>父子组件通信</title>
</head>
<body>
    <div id="app">
        <!-- 属性不支持驼峰写法，必须用-代替 -->
        <cpn1 :father="fathervalue" :cmessage="message" :tuo-feng="tuofeng"></cpn1>
    </div>


    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
            <h1>{{father}}</h1>
            <h2>{{cmessage}}</h2>
            <h2>{{moren}}</h2>
            <h3>爱好：{{hobby}}</h3>
            <h3>user:{{user.name}}---{{user.age}}岁</h3>
            <h4>{{tuoFeng}}</h4>
            <h2>我是子组件</h2>
        </div>
    </template>



    <script src="../vue.js"></script>
    <script>

        const cpn1={
            template:'#cpn1',
            data(){
                return{

                }
            },

            //写法一,数组
            // props:['father','cmessage']

            //写法二，对象，限定类型
            // props:{
            //     father:String,
            //     cmessage:String
            // }

            //写法三，对象，限定类型并设置默认值
            props:{
                father:{
                    type:String,
                    default:"子组件默认值",
                    required:true  //必须传值
                },
                cmessage:{
                    type:String,
                    default:"子组件默认message"
                },
                moren:{
                    type:String,
                    default:"子组件默认有值"
                },
                tuoFeng:{
                    type:String,
                    default:"驼峰标志"
                },

                //如果默认值是对象和数组，default必须是函数
                hobby:{
                    type:Array,
                    default(){
                        return ['篮球','足球','乒乓球']
                    }
                },
                user:{
                    type:Object,
                    default(){
                        return {name:'张三',age:20}
                    }
                }

            }

        }



        const app=new Vue({
            el:"#app",
            data:{
                fathervalue:"我是父组件的值",
                message:"我是父组件的message",
                tuofeng:"父组件驼峰标志"
            },
            methods: {
                
            },
            components:{
                cpn1
            }
        })
    </script>
</body>
</html>